<template>
	<view id="TransactionRecords">
		<scroll-view scroll-y="true" class="listBox" @lower-threshold=0 @scrolltolower="lower" enable-back-to-top="true">
			<view class="list" v-for="(item,index) in redRecordData" :key="index">
				<view class="timeBox">
					<h3>{{item.date}}</h3>
					<span>{{item.year}}年</span>
				</view>
				<view class="InfoBox">
					<view class="Operation">
						<h3>礼品兑换</h3>
						<p>
							备注:
							<span>{{item.remark}}</span>
						</p>
					</view>
					<view class="OperationInfo">
						<h3>-{{item.cashMoney}}</h3>
						<span v-if="item.cashType == 1">消耗</span>
						<span v-if="item.cashType == 2">获得</span>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				redRecordData: [],
				pages: 1,
				countPage:null
			}
		},
		created() {
			let _this = this;
			this.$get(configUrl.getRedGold, {
				token: uni.getStorageSync("token"),
				page: 1
			}).then((res) => {
				if (res.data.data) {
					_this.redRecordData = res.data.data.list;
					_this.countPage = res.data.data.countPage
					// _this.countPage > 3 ? 3 : _this.countPage
				}
			})
		},
		methods: {
			lower() {
				let _this = this;
				this.pages += 1;
				if (this.pages <= _this.countPage) {
					uni.showLoading({
						title: "加载中",
						mask: true,
						success: () => {
							this.$get(configUrl.getRedGold, {
								token: uni.getStorageSync("token"),
								page: _this.pages
							}).then((res) => {
								if (res.data.data != []) {
									for (let i in res.data.data.list) {
										_this.redRecordData.push(res.data.data.list[i])
									}
									setTimeout(function(){
										uni.hideLoading();
									},1000)
								} else {
									uni.showToast({
										title: "没有更多数据",
										icon: "none"
									})
								}
							})
						}
					})
				}else{
					uni.showToast({
						title:"没有更多记录",
						icon:"none"
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	#TransactionRecords {
		.listBox {
			height: 1216upx;

			.list {
				width: 100%;
				height: 140upx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				border: 1upx solid #E4E4E4;
				box-shadow: inset 0 0 0 0 #C2C2C2;

				.timeBox {
					width: 152upx;
					height: 74upx;
					display: flex;
					flex-direction: column;
					justify-content: centert;
					align-items: center;
					border-right: 2upx solid #979797;

					h3 {
						font-family: PingFangSC-Regular;
						font-size: 32upx;
						color: #999999;
						letter-spacing: 0;
						text-align: center;
					}

					span {
						font-family: PingFangSC-Regular;
						font-size: 24upx;
						color: #CCCCCC;
						letter-spacing: 0;
						text-align: center;
					}
				}

				.InfoBox {
					width: 596upx;
					height: 74upx;
					padding-left: 20upx;
					padding-right: 20upx;
					display: flex;
					justify-content: space-between;
					align-items: content;

					.Operation {
						h3 {
							font-family: PingFangSC-Regular;
							font-size: 32upx;
							color: #333333;
							letter-spacing: 0;
						}

						p {
							font-family: PingFangSC-Regular;
							font-size: 24upx;
							color: #CCCCCC;
							letter-spacing: 0;

							span {
								padding-left: 10upx;
							}
						}
					}

					.OperationInfo {
						h3 {
							font-family: PingFangSC-Regular;
							font-size: 32upx;
							color: #333333;
							letter-spacing: 0;
							text-align: right;
						}

						span {
							font-family: PingFangSC-Regular;
							font-size: 24upx;
							color: #999999;
							letter-spacing: 0;
							text-align: right;
						}
					}
				}
			}
		}
	}
</style>
